import React, { memo, useEffect, useState } from "react";
import { Dialog } from "react-vant";
import { useNavigate } from "react-router-dom";
import { RightOutline } from "antd-mobile-icons";
import style from "./index.module.scss";
import myImage from "../../image/98e19b18-df39-4483-bce1-1339ff58a152.png";
import myImage1 from "../../image/1_副本.gif";
import myImage2 from "../../image/2_副本.gif";
import myImage3 from "../../image/3_副本.gif";
import myImage5 from "../../image/6.gif";
import myImage4 from "../../image/5_副本.gif";
import myImage7 from "../../image/7.png";
import Card from "../../components/Card";

const Index: React.FC = memo(() => {
  const [visible, setVisible] = useState(false);
  //跳转全部计划页面
  const navigate = useNavigate();
  //跳转健康计划页面
  const handleAllPlan = () => {
    navigate("/plan");
  };
  //跳转健康测评页面
  const handlelutation = () => {
    navigate("/lutation");
  };
  //跳转生长曲线页面
  const handlecurve = () => {
    navigate("/curve");
  };
  //跳转健康顾问页面
  const handleadviser = () => {
    navigate("/adviser");
  };
  //跳转PK页面
  const handlebpk = () => {
    navigate("/bpk");
  };
  setTimeout(() => {
    setVisible(false);
  }, 2000);

  useEffect(() => {
    const flag = localStorage.getItem("guanggao");
    if (flag) {
      setVisible(false);
    }else{
      setVisible(true);
      localStorage.setItem("guanggao", "1");
    }
  }, []);

  return (
    <div>
      <Dialog
        visible={visible}
        confirmButtonText="开启我的专属健康"
        confirmButtonColor="#1dbe7e"
        onConfirm={() => {
          setVisible(false);
        }}
      >
        <img src={myImage7} alt="" className={style.img7} />
      </Dialog>
      <div className={style.header}>
        <div className={style.left}>
          <img
            src={myImage}
            alt=""
            className={style.img6}
            onClick={handleadviser}
          />
        </div>
        <div className={style.right}>
          <div className={style.box}></div>
          <div className={style.text} onClick={handleadviser}>
            <p>
              根据你的选择，以下有建议你重点关注
              哦～健康管理，病情分析，复杂重病推荐、
              安排全国专家等，也可点击头像咨询我
            </p>
          </div>
        </div>
        <div className={style.bottom}>
          <h3>健康计划</h3>
          <span onClick={handleAllPlan}>
            全部计划
            <RightOutline />
          </span>
        </div>
      </div>
      <div className={style.main}>
        <div className={style.plan}>
          <div className={style.box}>
            <div className={style.text}>
              <h3>8天健康养成计划</h3>
              <p>6462人已加入</p>
              <p>
                <button>免费加入</button>
              </p>
            </div>
          </div>
          <div className={style.box}>
            <div className={style.text}>
              <h3>欧茜医生0~1岁育儿...</h3>
              <p>149086人已加入</p>
              <p>
                <button>免费加入</button>
              </p>
            </div>
          </div>
          <div className={style.box}>
            <div className={style.text}>
              <h3>21岁战痘计划</h3>
              <p>209952人已加入</p>
              <p>
                <button>免费加入</button>
              </p>
            </div>
          </div>
          <div className={style.box}>
            <div className={style.text}>
              <h3>睡眠改善计划</h3>
              <p>6462人已加入</p>
              <p>
                <button>免费加入</button>
              </p>
            </div>
          </div>
          <div className={style.box}>
            <div className={style.text}>
              <h3>30天上班族保健计划</h3>
              <p>6462人已加入</p>
              <p>
                <button>免费加入</button>
              </p>
            </div>
          </div>
          <div className={style.box}>
            <div className={style.text}>
              <h3>21天瘦腰计划</h3>
              <p>6462人已加入</p>
              <p>
                <button>免费加入</button>
              </p>
            </div>
          </div>
        </div>
        <div className={style.toolbox}>
          <h3>健康工具箱</h3>
          <div className={style.box}>
            <img onClick={handlelutation} src={myImage1} alt="" />
            <img onClick={()=>navigate('/vaccine')} src={myImage2} alt="" />
            <img src={myImage3} alt="" />
            <img onClick={handlebpk} src={myImage4} alt="" />
            <img onClick={handlecurve} src={myImage5} alt="" />
          </div>
        </div>
        <div className={style.toolbox1}>
          <h3>
            健康档案&emsp;
            <span className={style.spa}>开启记录&nbsp;让健康有迹可循</span>
          </h3>
        </div>
      </div>
      <Card />
    </div>
  );
});

export default Index;
